<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title>收入支出流水</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <style type="text/css">
        .leftFilter {
            float: left;
            text-align: left;
            margin-right: 5px;
        }

        .clickable {
            color: #489EF1;
            cursor: pointer;
            text-align: left;
            font-weight: bold;
        }

        .td {
            text-align: center;
        }

        .cancellation {
            color: #999999;
        }

        .today {
            color: #ff0000;
        }

        .lineOne {
            text-align: center;
        }

        .lineOne span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }
        .content {
            padding: 8px 8px 0 8px;
        }
    </style>
</head>
<body>
<section class="content" id="list">
    <div class="div-td-content-more"><i></i></div>
    <div style="text-align:right;padding-bottom: 10px; height: 35px;">
        <select class="form-control  queryIdSelect pull-left" v-model="companyId" style="width: 190px;margin-right: 10px;height: 25px;line-height: 25px;padding: 0;
    font-size: 12px;" @change="query('refresh',true)">
            <option :value="item.companyId" v-for="(item,i) in companyList">{{item.companyName}}
            </option>
        </select>
        <select class="form-control  accountApplicationSelect  pull-left " v-model="tkBankCardId"  @change="query('refresh')"
                style="width: 190px;margin-right: 10px;height: 25px;line-height: 25px;padding: 0;
    font-size: 12px;">
            <option value="" selected="selected">银行账户</option>
            <option v-for="(option,i) in bankList" :value="option.bankCard">{{option.bankName}}</option>
        </select>
        <input class="pull-left form-control pull-left input-sm" type="text" placeholder="金额"
               v-model="money" style="width: 80px;margin-right: 10px">
        <select class="form-control  accountApplicationSelect  pull-left " v-model="flowDirection"  @change="query('refresh')"
                style="width: 90px;margin-right: 10px;height: 25px;line-height: 25px;padding: 0;
    font-size: 12px;">
            <option value="" selected="selected">项目类型</option>
            <option value="0">支出</option>
            <option value="1">收入</option>
        </select>
        <input class="pull-left form-control pull-left input-sm" type="text" placeholder="项目"
               v-model="project" style="width: 80px;margin-right: 10px">
        <input class="pull-left form-control pull-left input-sm" type="text" v-model="beginTime"
               @focus="showDatePicker($event)" placeholder="请选择开始时间"
               style="width: 150px;margin-right: 10px;">
        <input class="pull-left form-control pull-left input-sm" type="text" v-model="endTime"
               @focus="endDatePicker($event)" placeholder="请选择结束时间"
               style="width: 150px;margin-right: 10px;">
        <button type="button" class="btn oaBtn btn-sm pull-left" style="margin-left: 10px;"
                @click="query('refresh')">查询
        </button>
        <!--<span class="pull-right" style="line-height: 25px;font-weight: bold;">本页合计：-900</span>-->
    </div>

    <div class="box-body no-padding iframeH" id="scrollDiv">
        <table class="table table-hover" style="margin: -1px 0">
            <thead>
            <tr>
                <th style="width: 120px;text-align: center" class="tableTitle">操作</th>
                <th style="text-align: center" class="tableTitle">银行账户</th>
                <th style="width: 80px;text-align: center" class="tableTitle">金额</th>
                <th style="width: 55px;text-align: center" class="tableTitle">项目类型</th>
                <th style="width: 300px;text-align: center" class="tableTitle">项目</th>
                <th style="width: 60px;text-align: center" class="tableTitle">录入人</th>
                <th style="width: 130px;text-align: center" class="tableTitle">录入时间</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in list"
                :class="isToday(item.createTime)?'today':item.state==1?'cancellation':''" v-cloak>
                <template v-if="item.delFlag==1">
                    <td style="text-align: center;color: #2a8cec;">已作废</td>
                </template>
                <template v-else-if="isToday(item.createTime)">
                    <td style="text-align: center;color: #2a8cec;cursor: pointer;"
                        @click="cancellation(item)">作废
                    </td>
                </template>
                <template v-else="">
                    <td style="text-align: center;"></td>
                </template>

                <td style="text-align: left;" class="lineOne"><span>{{item.bankName}}</span></td>
                <td v-bind:class="isToday(item.createTime) ? 'today' : ''"
                    style="text-align: center;">{{fmoney(item.money)}}
                </td>
                <td v-bind:class="isToday(item.createTime) ?  'today' : ''"
                    style="text-align: center">{{item.flowDirection==0?"支出":"收入"}}
                </td>
                <td v-bind:class="isToday(item.createTime) ?  'today' : ''"
                    style="text-align: left;" class="lineOne">
                    <span>{{item.project}}</span>
                </td>
                <td v-bind:class="isToday(item.createTime) ?  'today' : ''"
                    style="text-align: center">{{item.name}}
                </td>
                <td v-bind:class="isToday(item.createTime) ?  'today' : ''"
                    style="text-align: center">{{formatDate(item.createTime)}}
                </td>
            </tr>
            </tbody>
        </table>
        <div class="oa-pager text-center" style="margin-top: 5px;">
            共
            <span id="allCount"> 0 </span>条记录&nbsp;&nbsp;&nbsp;
            <span id="nowPage"> 1 </span>/<span id="allPage">1</span>&nbsp;&nbsp;&nbsp;
            <span class="oa-pager-button" id="first">首页</span>
            <span class="oa-pager-button" id="prev">上一页</span>
            <span class="oa-pager-button" id="next">下一页</span>
            <span class="oa-pager-button" id="last">尾页</span>
        </div>
    </div>
    <!-- /.box-body -->
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript" src="/dist/plugins/select2/select2.full.min.js"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });

    $.wyui.page.getByPage_callback = function (data) {
        app.nowPage = ($.wyui.page.queryParams.requestPage - 1) * 30
        app.list = data;
    };
    $.wyui.page.getByPage_scroll_callback = function (list) {
        if (list.length < 30) {
            isLoad = false;
        } else {
            for (var i = 0; i < list.length; i++) {
                app.list.push(list[i]);
            }
            isLoad = true;
        }
    }
</script>
<script type="text/javascript">
    Vue.directive('select2', {
        inserted: function (el, binding, vnode) {
            var options = binding.value || {};

            $(el).select2(options).on("select2:select", function (e) {
                el.dispatchEvent(new Event('change', {target: e.target})); //说好的双向绑定，竟然不安套路
            });
        },
        update: function (el, binding, vnode) {
            $(el).trigger("change");
        }
    });
    var app = new Vue({
        el: '#list',
        data: {
            bankList: [{"bankName": " ", "id": " "}],
            list: [],
            beginTime: "",
            endTime: "",
            time: "",
            fkCompanyId: "",
            tkBankCardId: "",
            money: "",
            project: "",
            flowDirection: "",
            companyId: '',
            companyList: []
        },
        methods: {
            formatDate: function (now) {
//                return  NewDate(now).Format(TimeFormat.pcList)
                return NewDate(now).Format(TimeFormat.pcList)
            },
            fmoney: function (s, n) {
                n = n > 0 && n <= 20 ? n : 2;
                s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
                var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1],
                    t = "";
                for (i = 0; i < l.length; i++) {
                    t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
                }
                return t.split("").reverse().join("") + "." + r;
            },
            showDatePicker: function (e) {
                var that = this;
                WdatePicker({
                    onpicked: function (dp) {
                        that.beginTime = dp.cal.getNewDateStr();
                        return true;
                    },
                    //dateFmt:'yyyy-MM-dd HH:mm'
                });
                $(e.target).blur();
            },
            endDatePicker: function (e) {
                var that = this;
                WdatePicker({
                    onpicked: function (dp) {
                        that.endTime = dp.cal.getNewDateStr();
                        return true;
                    },
                });
                $(e.target).blur();
            },
            isToday: function (time) {
                //var time = time.substring(0, 10);
                var today = new Date().Format("yyyy-MM-dd");
                if (today.indexOf(time) >0  ) {
                    return true;
                } else {
                    return false;
                }

            },
            query: function (type,type2) {
                if(type2){
                    this.tkBankCardId='';
                }
                var that = this;
                this.changeBank()
                if (type = 'refresh') {
                    $.wyui.page.queryParams.requestPage = 1;
                }
                $.wyui.page.dataUrl = server.ip + urlConfig.capital.flow.getFlowList;
                var obj = {
                    "fkCompanyId": that.companyId,
                    "tkBankCardId": that.tkBankCardId,
                    "money": that.money,
                    "project": that.project,
                    "flowDirection": that.flowDirection,
                    "beginTime": that.beginTime,
                    "endTime": that.endTime
                }
                $.extend($.wyui.page.queryParams, obj);
                $.wyui.page.getByPage_callback = function (r) {
                    that.list = r;
                    document.getElementById("scrollDiv").scrollTop = 0;
                };
                $.wyui.page.getByPage_scroll_callback = function (list) {
                    if (list.length < 30) {
                        isLoad = false;
                    } else {
                        for (var i = 0; i < list.length; i++) {
                            that.list.push(list[i]);
                        }
                        isLoad = true;
                    }
                };
                $.wyui.page.getByPage();

                //---分页前---
                // $.wyui.postMethod(urlConfig.capital.flow.getFlowList, {
                //     "fkCompanyId": that.companyId,
                //     "tkBankCardId": that.tkBankCardId,
                //     "money": that.money,
                //     "project": that.project,
                //     "flowDirection": that.flowDirection,
                //     "beginTime": that.beginTime,
                //     "endTime": that.endTime
                // }, function (r) {
                //     that.list = r;
                // });
            },
            //  添加账户
            addDraft: function () {

                var that = this;
                url = "/page/reportForm/capital/addDraft.html";
                $.dialog({
                    content: 'url:' + url,
                    title: '录入汇票信息',
                    width: 750,
                    height: 230,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            editDraft: function () {
                var that = this;
                url = "/page/reportForm/capital/editDraft.html";
                $.dialog({
                    content: 'url:' + url,
                    title: '编辑汇票信息',
                    width: 750,
                    height: 230,
                    max: false,
                    min: false,
                    lock: true
                });
            }, getList: function () {
                this.query("refresh")
                // var that = this;
                // $.wyui.postMethod(urlConfig.capital.flow.getFlowList, {"fkCompanyId": that.companyId}, function (r) {
                //     that.list = r;
                //     console.log(r);
                // });
            },
            //  作废
            cancellation: function (item) {
                var that = this;
                console.log(item)
                url = "/page/reportForm/capital/deleteJournal.html?id=" + item.id;
                $.dialog({
                    content: 'url:' + url,
                    title: '作废',
                    width: 750,
                    height: 100,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            changeBank:function () {
                var that=this;
                $.wyui.postMethod(urlConfig.capital.bankCard.getBankCardList, {
                    "fkCompanyId": that.companyId,
                    useStatus: 1
                }, function (r) {
                    that.bankList = r;
                    for (var i = 0; i < that.list.length; i++) {
                        that.list[i].tkBankCardId = that.bankList[0].id;
                        that.list[i].tkOutBankCardId = that.bankList[0].id;
                    }
                });
            }
        },

        mounted: function () {
            var that = this;
            that.companyId = getCurrentUser().companyId
            //
            console.log(getCurrentUser())
            //应收账款专员，孙强可看见所有公司的
            if (getCurrentUser().roleName == "应收账款专员" || getCurrentUser().name == "孙强"|| getCurrentUser().name == "靳悦双"||getCurrentUser().name=="曹国玉"||getCurrentUser().name=="谈小中"||getCurrentUser().name=="要晋龙"||getCurrentUser().name=="林恩智") {
                $.wyui.postMethod(urlConfig.system.company.getCompanyList, {}, function (r) {
                    console.log(r)
                    for(var i=0;i<r.length;i++){
                        if(r[i].name=="滚滚向前集团"){
                            r.splice(i, 1);
                        }
                    }
                    for (var i = 0; i < r.length; i++) {
                        r[i].companyId = r[i].id
                        r[i].companyName = r[i].name
                    }
                    that.companyList = r;
                    that.companyId = r[0].id
                }, true);
            } else {
                $.wyui.postMethod(urlConfig.system.user.getCompanyIdsByUserId, {"userId": getCurrentUser().id}, function (r) {
                    that.companyList = r;
                    that.companyId = r[0].companyId
                }, true);
            }

            $.wyui.postMethod(urlConfig.capital.bankCard.getBankCardList, {
                "fkCompanyId": that.companyId,
                useStatus: 1
            }, function (r) {
                that.bankList = r;
                for (var i = 0; i < that.list.length; i++) {
                    that.list[i].tkBankCardId = that.bankList[0].id;
                    that.list[i].tkOutBankCardId = that.bankList[0].id;
                }
            });
            that.getList();

        }
    });


</script>

</body>
</html>